<template>
  <div v-show="mapModuleIndex === 0||mapModuleIndex === 2" id="amap" :class="mapModuleIndex===2?'mapleft':'mapfull'" />
</template>

<script>

import Coordinate from '@/components/map/coordinate'
import CalculateSizeorAltitude from '@/assets/js/utils/CalculateSizeorAltitude'
import { mapState } from 'vuex'
export default {
  name: 'SceneMap',
  props: {
    baseLayers: {
      type: Array,
      default() {
        return []
      }
    },
    center: {
      type: Array,
      default() {
        return [128.02, 47.12197]
      }
    }
  },
  data: function() {
    return {
      map: undefined,
      mapService: undefined,
      relateMap: false
    }
  },
  methods: {
    /**
     * 设置地图范围参数
     */
    setExtentChangeSource() {
      if (this.relateMap) {
        return
      }
      const mapBounds = this.$store.state.eswyzt.map.getBounds()
      // console.log(JSON.stringify(mapBounds))
      const centerx = (mapBounds.getWest() + mapBounds.getEast()) / 2
      const centery = (mapBounds.getNorth() + mapBounds.getSouth()) / 2
      const width = Math.abs(mapBounds.getWest() - mapBounds.getEast())
      const altitude = CalculateSizeorAltitude.CalculateAltitudeFromBounds(width)
      const source = {
        type: '2d',
        extent: {
          x: centerx,
          y: centery,
          h: altitude
        }
      }
      this.$store.commit('eswyzt/setExtentChangeSourceMap', source)
    }
  },
  computed: {
    ...mapState({
      // 地图模块控件
      mapModuleIndex(state) {
        return state.eswyzt.mapModuleIndex
      },
      // 地图范围参数
      extentChangeSourceScene(state) {
        return state.eswyzt.extentChangeSourceScene
      }
    })
  },
  watch: {
    /**
     * 监视地图范围参数
     * @param val
     */
    extentChangeSourceScene(val) {
      if (val === null) { return }
      if (this.$store.state.eswyzt.map === null) { return }
      if (val.type === '3d') {
        this.relateMap = true
        if (typeof (val.bounds.xmin) === 'undefined') {
          this.$store.state.eswyzt.map.flyTo({
            center: [val.center.lon, val.center.lat],
            zoom: 5,
            speed: 0.2,
            curve: 1
          })
        } else {
          const bbox = [[val.bounds.xmin, val.bounds.ymax], [val.bounds.xmax, val.bounds.ymin]]
          this.$store.state.eswyzt.map.fitBounds(bbox)
        }
      }
    }
  },
  mounted() {
    const map = new mapboxgl.Map({
      container: 'amap',
      style: {
        version: 8,
        sprite: '',
        glyphs: '',
        sources: {},
        layers: []
      },
      units: 'degree',
      crs: 'EPSG:4490',
      center: this.center,
      zoom: 5,
      trackResize: true
    })
    map.addControl(new Coordinate(), 'bottom-left')
    // map.addControl(new mapboxgl.NavigationControl(), 'top-right')
    map.addControl(new mapboxgl.ScaleControl({}))
    this.$emit('oneMapInstanceComplete', map)

    map.on('mouseover', (e) => {
      this.relateMap = false
    })
    map.on('zoomend', (e) => {
      this.setExtentChangeSource()
    })
    map.on('dragend', (e) => {
      this.setExtentChangeSource()
    })
    map.on('pitchend', (e) => {
      this.setExtentChangeSource()
    })
  }
}
</script>

<style scoped>
  #amap {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .mapbox-gl-draw_trash{
    display: none;
  }
  .mapleft{
    width: 50% !important;
  }
  .mapfull{
    width: 100% !important;
  }
</style>
